<template>
	<view>
		<view class="top-header-box">
			<view class="user-box">
				<view class="user-head-img">
					<image :src="$wanlshop.oss(shop_info.avatar)" mode=""></image>
				</view>
				<view class="user-id">id: {{shop_info.id}}</view>
				<view class="user-date">营业时间: {{shop_info.run_time}}</view>
			</view>
			<view class="swich-box">
				<view style="padding: 0 10rpx;">{{checked?'营业中':'未营业'}}</view>
				<u-switch v-model="checked" active-value=1 inactive-value=0  active-color='#f24b1f' size='30' @change='switchChang' inactive-color='#fff'></u-switch>
				<!-- <switch checked="true" color="#f24b1f" style="transform:scale(0.7)" /> -->
			</view>
		</view>

		<view class="user-data-box">
			<div class="top-head-box">
				<view class="title-bold">店铺资料</view>
				<view class="edit-btn" @click="editData">{{ editType?'保存':'编辑' }}</view>
			</div>
			<view class="item-label-user-data" v-for="(item, index) in storeInfo" :key="index">
				<view class="user-data-left">
					<view class="label-name">{{item.name}}</view>
					<view class="label-content">
						<input class="edit-ipt" type="text" v-model="item.val" :disabled="item.isDisabled">
					</view>
				</view>
				<view class="navigation" v-if="item.isRight" @click="goStore">
					<image src="../../../static/images/shop/map.png" mode=""></image>
					<!-- <view class="text">点击导航去店铺 </view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shop_info: {},
				editType: false, // true编辑状态
				checked:0, // 营业状态
				run_status:1,
				longitude: '',
				latitude: '',
				storeInfo: [{
						name: '店铺名称',
						isDisabled: true,
						val: '美丽人生（西流湖店）'
					},
					{
						name: '店长姓名',
						isDisabled: true,
						val: '朱明明'
					},
					{
						name: '绑定手机号',
						isDisabled: true,
						val: '158****7837'
					},
					{
						name: '店铺位置',
						isDisabled: true,
						val: '郑州市中原区国家大学科技园',
						isRight: true,
					},
				]
			}
		},
		onLoad() {
			this.initData()
		},
		methods: {
			// 获取初始信息
			initData() {
				this.$api.post({
					url: "/wanlshop.shop/shopInfo",
					success: res => {
						this.shop_info = res
						this.storeInfo[0].val = res.shopname
						this.storeInfo[1].val = res.shopkeeper
						this.storeInfo[2].val = res.phone
						this.storeInfo[3].val = res.address
						this.checked = res.run_status
						this.latitude = res.latitude
						this.longitude = res.longitude
					}
				})
			},
			// 更改状态
			switchChang(val){
				// this.checked = val
				console.log(val)
				this.run_status = val
				this.editHandle()
			},
			// 提交数据
			editData() {
				this.editType = !this.editType
				for (let i in this.storeInfo) {
					this.storeInfo[i].isDisabled = !this.storeInfo[i].isDisabled
				}
				if(this.editType === false) {
					this.editHandle()
				} 
			},
			// 请求修改数据
			editHandle(){
				const that = this
				let data={
					shopname: this.storeInfo[0].val,
					phone: this.storeInfo[2].val,
					address: this.storeInfo[3].val,
					longitude: this.longitude,
					latitude: this.latitude,
					run_time: this.shop_info.run_time,
					run_status: this.run_status,
					shopkeeper: this.storeInfo[1].val
				}
				this.$api.post({
					url: '/wanlshop.shop/editShopInfo',
					data,
					success:res=>{
						that.$u.toast('修改成功！')
					}
				})
			},
			// 定位
			goStore() {
				const that = this
				if(this.editType === true){
					uni.chooseLocation({
					success(res) {
						that.storeInfo[3].val = res.name
						that.longitude = res.longitude,
						that.latitude = res.latitude
					}
				})
				}
				

			}
		}
	}
</script>

<style scoped lang='scss'>
	.top-header-box {
		width: 100%;
		height: 500rpx;
		position: relative;
		background-image: url();
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.user-box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: absolute;
		left: 50%;
		top: 50rpx;
		transform: translateX(-50%);
	}

	.user-head-img {
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
		overflow: hidden;
		margin-bottom: 30rpx;
	}

	.user-head-img image {
		width: 100%;
		height: 100%;
	}

	.user-id {
		font-size: 36rpx;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		color: #FFFFFF;
	}

	.user-date {
		font-size: 26rpx;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		color: #FFFFFF;
		margin-top: 28rpx;
		padding-bottom: 20rpx;
	}

	.swich-box {
		display: flex;
		align-items: center;
		color: white;
		font-size: 24rpx;
		position: absolute;
		right: 40rpx;
		top: 60rpx;
	}

	.user-data-box {
		margin-top: 20rpx;
		width: 690rpx;
		position: relative;
		left: 50%;
		transform: translateX(-50%);
		top: -150rpx;
		background-color: white;
		padding: 60rpx 30rpx 150rpx;
		box-sizing: border-box;
		border-radius: 10px;
		display: flex;
		flex-direction: column;
	}

	.top-head-box {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: solid 1rpx #f8f8f8;
		padding-bottom: 28rpx;
	}

	.title-bold {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #000000;
	}

	.edit-btn {
		font-size: 25rpx;
		color: #4c4c4c;
	}

	.item-label-user-data {
		padding: 35rpx 0 25rpx;
		border-bottom: solid 1rpx #f8f8f8;
		display: flex;
		justify-content: space-between;

		.user-data-left {
			display: flex;
			flex-direction: column;
		}
	}

	.label-name {
		font-size: 24rpx;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		color: #FF572B;
	}

	.label-content {
		font-size: 28rpx;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		margin-top: 18rpx;
		display: flex;
		justify-content: space-between;
	}

	.edit-ipt {
		width: 600rpx;
		color: #4D4D4D;
		font-size: 28rpx;
		border-bottom: 1rpx solid rgba(0,0,0,0.1) ;
	}

	.navigation {
		display: flex;
		justify-content: center;
		flex-direction: column;

		image {
			width: 32rpx;
			height: 37rpx;
			margin: 0 auto;
		}

		.text {
			font-size: 20rpx;
			font-family: Adobe Heiti Std;
			font-weight: normal;
			color: #FF4400;
			margin-top: 10rpx;
		}
	}
</style>
